import React, { Component } from 'react'
import { connect } from 'react-redux'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import classnames from 'classnames';
import { deletePost, addLike, removeLike } from '../../actions/postActions'


// 点赞内容组件
export class PostItem extends Component {
  state = {
    errors: {}
  }
  componentWillReceiveProps (newProps) {
    if (newProps.errors) {
      this.setState({ errors: newProps.errors });

    }

  }
  // 删除评论
  onDeleteClick = (id) => {
    this.props.deletePost(id)
  }
  // 点赞
  onLikeClick (id) {
    this.props.addLike(id)
  }
  // 点赞样式 
  findUserLike = (likes) => {
    const { auth } = this.props
    //  匹配用户id看是否有人点过赞
    if (likes.filter(like => like.user === auth.user.id).length > 0) return true
    else return false

  }
  // 取消点赞
  onUnlikeClick (id) {
    this.props.removeLike(id)
  }
  render () {
    // 获取父组件传来的参数 
    const { post, auth, showActions } = this.props
    return (
      <div className="card card-body mb-3">
        <div className="row">
          <div className="col-md-2">
            <a href="profile.html">
              <img className="rounded-circle d-nonse d-md-block" src={post.avatar}
                alt="" />
            </a>
            <br />
            <p className="text-center">{post.name}</p>
          </div>
          <div className="col-md-10">
            <p className="lead">{post.text}</p>
            {
              showActions ? (
                <span>
                  <button onClick={this.onLikeClick.bind(this, post._id)} type="button" className="btn btn-light mr-1">
                    <i className={classnames("fas fa-thumbs-up", {
                      'text-info': this.findUserLike(post.likes)
                    })}></i>
                    <span className="badge badge-light">{post.likes.length}</span>
                  </button>
                  <button onClick={this.onUnlikeClick.bind(this, post._id)} type="button" className="btn btn-light mr-1">
                    <i className="text-secondary fas fa-thumbs-down"></i>
                  </button>
                  <Link to={`/post/${post._id}`} className="btn btn-info mr-1">
                    鼓励留言
                </Link>
                  {
                    // 判断写评论的和登录的用户ID是否一致;如一致则为本人所写;可以删除
                    post.user === auth.user.id ? (
                      <button
                        onClick={() => this.onDeleteClick(post._id)}
                        type="button"
                        className="btn btn-danger mr-1">
                        删除
                      </button>
                    ) : null
                  }
                </span>
              ) : null
            }

          </div>
        </div>
      </div>
    )
  }
}
PostItem.defaultProps = {
  showActions: true
}
const mapStateToProps = (state) => ({
  auth: state.auth,
  errors: state.errors
})

const mapDispatchToProps = dispatch => {
  return {
    deletePost: (id) => {
      dispatch(deletePost(id))
    },
    addLike: (id) => {
      dispatch(addLike(id))
    },
    removeLike: (id) => {
      dispatch(removeLike(id))
    },
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(PostItem)
